<template>
	<el-container>
		<div id="gxfx">
			<el-form :inline="true" :model="formInline" class="demo-form-inline" style="display:inline-block;">
				<el-form-item label="客户名称">
					<el-input v-model="name" placeholder="客户名称"></el-input>
				</el-form-item>
				<el-form-item label="年份">
					<el-select v-model="value" placeholder="请选择年份">
						<el-option value="全部"></el-option>
						<el-option v-for=" user in tableData" :value="user.orderTime"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onSubmit">帮助</el-button>
					<el-button type="danger" @click="onSuf">查询</el-button>
					<el-button type="danger" @click="exportExcel">导出</el-button>
				</el-form-item>
			</el-form>
		</div>
		<template>
			<el-table id="out-table" :data="tableDatab.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%;display: none;" max-height="550">
				<el-table-column prop="id" label="编号" width="200" type="index">
				</el-table-column>
				<el-table-column prop="name" label="客户名称" width="500">
				</el-table-column>
				<el-table-column prop="amount" label="订单金额(元)" width="250">
				</el-table-column>
			</el-table>
		</template>
		<!-- <div class="line"></div>
		<div class="block">
		        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
		          :page-sizes="[5,10,15,20]"  :page-size="pagesize"  layout="total, sizes, prev, pager, next, jumper"
		          :total="tableDatab.length">
		        </el-pagination>
		 </div> -->
		<div id="pieChart" class="chart-container"></div>
	</el-container>
</template>

<script>
	import FileSaver from 'file-saver'
	import XLSX from 'xlsx'
	export default {
		name: "gxfx",
		data() {
			return {
				juese: '',
				currentPage: 1, //初始页
				pagesize: 5, //    每页的数据
				name: '',
				formInline: {},
				tableData: [],
				tableDatab: [],
				value: '全部',
				charts: {},
				pieData: [],
				option: {}
			}
		}, methods: {
			init() {
				this.$nextTick(() => {
					this.charts = this.$echarts.init(document.getElementById('pieChart'), 'light');
					window.addEventListener('resize', this.handleResize);
				})
			},
			setOption(data) {
				let option = {
					title: {
						text: '客户贡献分析',
						subtext: '',
						x: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b} : {c} ({d}%)"
					},
					legend: {
						x: 'center',
						y: 'bottom',
						data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
					},
					toolbox: {
						show: true,
						feature: {
							mark: { show: true },
							dataView: { show: true, readOnly: false },
							magicType: {
								show: true,
								type: ['pie', 'funnel']
							},
							restore: { show: true },
							saveAsImage: { show: true }
						}
					},
					calculable: true,
					series: [
						{
							name: '总金额',
							type: 'pie',
							radius: [30, 110],
							center: ['50%', '50%'],
							roseType: 'area',
							data: data
						}
					]
				};
				this.charts.setOption(option);
			},
			getData() {
				this.$http.get('/d/b').then(res => {
					console.log(res.data);
					this.tableData = res.data;
				});
			},
			getDatab() {
				this.$http.get('/d/a').then(res => {
					console.log(res.data);
					this.tableDatab = res.data;
					this.setPieData();
				});
			},
			setPieData() {
				this.pieData = [];
				for (const data of this.tableDatab) {
					this.pieData.push({ value: data.amount, name: data.name });
				}
			},
			onSubmit() {
				console.log('s!');
			},
			onSuf() {
				if (this.value != "全部") {
					this.$http.post('/d/c?name=' + this.name + '&orderTime=' + this.value).then(res => {
						this.tableDatab = res.data;
						this.setPieData();
					});
				}
				else {
					this.getDatab();
				}
			},
			deleteRow(index, rows) {
				rows.splice(index, 1);
			},
			handleSizeChange(size) {
				this.pagesize = size;
			},
			handleCurrentChange(currentPage) {
				this.currentPage = currentPage;
			},
			exportExcel() {
				/* generate workbook object from table */
				var wb = XLSX.utils.table_to_book(document.querySelector('#out-table'))
				/* get binary string as output */
				var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
				try {
					FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '客户贡献分析.xlsx')
				} catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
				return wbout
			}
		},
		mounted() {
			let nowname = localStorage.getItem("reloname");
			this.juese = nowname;
			this.init();
			this.getData();
			this.getDatab();
		},
		watch: {
			pieData: {
				handler(newVal, oldVal) {
					if (this.charts) {
						if (newVal) {
							this.setOption(newVal);
						} else {
							this.setOption(oldVal);
						}
					}
				},
				deep: true
			}
		}
	}
</script>

<style scoped="scoped">
	#oppoyment {
		margin-left: 40px;
	}

	.line {
		background: black;
	}

	#gxfx {
		padding: 15px;
		background-color: #F0F0F0;
		border: 1px solid #ddd;
		border-radius: 5px;
		position: relative;
		left: 155px !important;
	}
	
	#gxfx>>>.el-main {
		margin: 0 !important;
		padding: 0 !important;
	}

	.el-header {
		background-color: #B3C0D1;
		color: #333;
		line-height: 60px;
		position: relative;
		left: 150px;
	}

	.chart-container {
		border-radius: 4px;
		width: 51.2%;
		height: 400px;
		background: #FBFBFB;
		box-shadow: 0 1px 10px 2px rgba(182, 191, 196, 0.5);
		padding: 20px;
		position: absolute;
		top: 25%;
		left: 31%;
	}
</style>